<template>
  <div class="bar-progress-container">
    <!-- 进度条容器 -->
    <div class="bar-progress-bar">
      <!-- 背景深灰色 -->
      <div class="bar-progress-bg"></div>
      <!-- 填充条（彩色） -->
      <div
          class="bar-progress-fill"
          :style="{ width: `${progressPercent}%`, backgroundColor: progressColor }"
      ></div>
      <!-- 文字：绝对定位，居中于整个容器，颜色固定为白色 -->
      <span class="bar-text-overlay">
        {{ value }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BarProgress',
  props: {
    value: {
      type: Number,
      required: true,
      validator: (value) => value >= 0
    },
    good: {
      type: Number,
      required: true
    },
    warn: {
      type: Number,
      required: true,
      validator: (value, props) => {
        if (props && props.good !== undefined) return value > props.good;
        return true;
      }
    },
    max: {
      type: Number,
      required: true,
      validator: (value, props) => {
        if (props && props.warn !== undefined) return value > props.warn;
        return true;
      }
    }
  },
  computed: {
    progressPercent() {
      return Math.min((this.value / this.max) * 100, 100);
    },
    progressColor() {
      if (this.value <= this.good) return '#52c41a'; // 绿色
      if (this.value <= this.warn) return '#faad14'; // 黄色
      return '#f5222d'; // 红色
    }
  },
  mounted() {
    this.validateProps();
  },
  updated() {
    this.validateProps();
  },
  methods: {
    validateProps() {
      const { good, warn, max } = this;
      if (warn <= good) {
        console.warn('[BarProgress] warn should be greater than good');
      }
      if (max <= warn) {
        console.warn('[BarProgress] max should be greater than warn');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.bar-progress-container {
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

.bar-progress-bar {
  height: 20px;
  overflow: hidden;
  position: relative;
  font-size: 13px;
  background-color: #333; /* 深灰色背景 */
}

.bar-progress-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* 填充条：在背景之上 */
.bar-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 1;
  transition: width 0.3s ease;
}

/* 文字 */
.bar-text-overlay {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
  color: #ffffff;
  z-index: 2;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none; /* 防止干扰点击 */
}
</style>
